import React ,{useState,useEffect}from 'react'
import {useDispatch,useSelector} from 'react-redux'
import { Sidebar } from 'react-vant';
import * as api from '../../api/index'
function Classify() {
  const [active, setActive] = useState(2);
  const dispatch = useDispatch()
  useEffect(()=>{
      dispatch(api.get_list())
  },[dispatch])
  const data = useSelector(state=>{
    return state.reducer.data
  })
  const childData = useSelector(state=>{
    return state.reducer.childData
  })
  console.log(childData);
  return (
    <div>
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
          dispatch(api.set_v(v))
        }}
      >
        {
          data.map((item,index)=>{
            return <Sidebar.Item key={index} title={item.title} >
                {
                  childData.map((val,i)=>{
                    return <div key={i}>
                      
                        <img src={val.img}/>
                        <p>{val.title}</p>
                      
                    </div>
                  })
                }
            </Sidebar.Item>
          })
        }
        
      </Sidebar>
    </div>
  )
}

export default Classify